<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools>
        <template #left>
          总共{{ total }}条记录
        </template>
        <template #right>
          <el-button size="small" type="danger" @click="$router.push('/import')">excel批量导入</el-button>
          <el-button size="small" type="success" @click="exportFn">导出</el-button>
          <el-button size="small" type="primary" @click="addFn">新增员工</el-button>
        </template>
      </PageTools>
      <el-card>
        <!-- 表格 -->
        <el-table :data="employees" border>
          <el-table-column label="序号">
            <template v-slot="{$index}">
              {{ $index+1 }}
            </template>
          </el-table-column>
          <el-table-column prop="username" label="姓名" sortable="" />
          <el-table-column prop="staffPhone" label="头像" sortable="">
            <template v-slot="{row}">
              <img
                v-imgError="require('../../assets/common/bigUserHeader.png')"
                :src="row.staffPhoto"
                style="width:70px"
                alt=""
              >
            </template>
          </el-table-column>

          <el-table-column prop="workNumber" label="工号" sortable="" />
          <el-table-column :formatter="formatFormEmployment" prop="formOfEmployment" label="聘用形式" sortable="">
            <!-- <template v-slot="{row}">
              {{ row.formOfEmployment===1?'正式':'非正式' }}
            </template> -->
          </el-table-column>
          <el-table-column prop="departmentName" label="部门" sortable="" />
          <el-table-column prop="timeOfEntry" label="入职时间" sortable="">
            <template v-slot="{row}">
              {{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="enableState" label="账户状态" sortable="">
            <template v-slot="{row}">
              <el-switch :value="row.enableState" disabled :inactive-value="0" :active-value="1" />
            </template>

          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template v-slot="{row}">
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="roleFn(row.id)">角色</el-button>
              <el-button type="text" size="small" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination :page-size="size" :total="total" layout="prev, pager, next" @current-change="curChangeFn" />
        </el-row>
      </el-card>
      <Add
        :show-dialog.sync="showDialog"
        @updateEvent="getEmployeeList"
      />
      <AssingRole
        ref="assignRole"
        :show-dialog.sync="visibleDialog"
        :user-id="userId"
      />
    </div>
  </div>
</template>

<script>
import { delEmployees, getEmployeesList } from '@/api/employees'
import employees from '@/api/constant/employees'
import Add from './components/add.vue'
import AssingRole from './components/assing-role.vue'
import { export_json_to_excel } from '@/vendor/Export2Excel'
export default {
  components: {
    Add,
    AssingRole
  },
  data() {
    return {
      employees: [],
      total: 0,
      size: 25,
      showDialog: false,
      visibleDialog: false,
      page: 1,
      userId: ''
    }
  },
  created() {
    // 获取员工列表
    this.getEmployeeList()
  },
  methods: {
    roleFn(id) {
      this.visibleDialog = true
      this.userId = id
      this.$nextTick(() => {
        this.$refs.assignRole.getroleList()
        console.log(123, this.$refs.assignRole)
      })
    },
    // 页码发生改变时触发的函数
    curChangeFn(curPage) {
      // console.log(65, curPage)
      this.page = curPage
      this.getEmployeeList()
    },
    addFn() {
      this.showDialog = true
    },
    delFn(id) {
      this.$confirm('确定删除吗？', '删除', {
        type: 'warning'
      }).then(async() => {
        await delEmployees(id)
        this.getEmployeeList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取员工列表
    async getEmployeeList() {
      const res = await getEmployeesList({
        page: this.page,
        size: this.size
      })
      // 保存员工列表
      this.employees = res.rows
      // console.log(this.employees)
      // 保存员工总数量
      this.total = res.total
    },
    async exportFn() {
      const res = await getEmployeesList({
        page: 1,
        size: this.total
      })
      console.log(res.rows)
      const newData = res.rows.map(item => {
        const arr = []
        const obj = {
          'username': '姓名',
          'mobile': '手机号',
          'workNumber': '工号',
          'timeOfEntry': '入职日期',
          'correctionTime': '转正日期'
        }
        for (const key in obj) {
          arr.push(item[key])
        }
        return arr
      })
      console.log(newData)
      const tHeader = ['姓名', '手机号', '工号', '入职日期', '转正日期']
      export_json_to_excel({
        header: tHeader,
        data: newData,
        filename: '员工数据表格'
      })
    },
    formatFormEmployment(row, column, cellValue, index) {
      const arr = employees.hireType.filter(item => {
        return item.id === cellValue
      })
      return arr[0] ? arr[0].value : '未知'
    }
  }
}
</script>

<style>

</style>
